<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="all">
    <title>我的预约</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="new/css/bootstrap.min.css">
    <!-- Customizable CSS -->
    <link rel="stylesheet" href="new/css/main.css">
    <link rel="stylesheet" href="new/css/blue.css">
    <link rel="stylesheet" href="new/css/owl.carousel.css">
    <link rel="stylesheet" href="new/css/owl.transitions.css">
    <link rel="stylesheet" href="new/css/animate.min.css">
    <link rel="stylesheet" href="new/css/rateit.css">
    <link rel="stylesheet" href="new/css/bootstrap-select.min.css">
    <link href="new/css/lightbox.css" rel="stylesheet">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="new/css/font-awesome.css">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Barlow:200,300,300i,400,400i,500,500i,600,700,800"
          rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,600italic,700,700italic,800'
          rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <style>
        /* 在引入的css文件中写入这个*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body class="cnt-home" >
<div id="CartContent" v-cloak>
    <!-- ============================================== HEADER ============================================== -->
    <header class="header-style-1">

        <!-- ============================================== TOP MENU ============================================== -->
        <div class="top-bar animate-dropdown">
            <div class="container">
                <div class="header-top-inner">
                    <div class="cnt-account">
                        <ul class="list-unstyled">
                            <li class="wishlist"><a href="index.html"><span>首页</span></a></li>
                            <li v-if="isLogin" class="check"><a href="javascript:;" @click="logout"><span>退出</span></a></li>
                            <li v-else class="login"><a href="Login.html"><span>登录</span></a></li>
                        </ul>
                    </div>

                    <div v-if="isLogin" class="cnt-block">
                        <ul class="list-unstyled list-inline">
                            <li class="dropdown dropdown-small"> <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><span class="value">欢迎你：{{nickName}}</span><b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="MyCart.html">我的预约</a></li>
                                    <li><a href="MyFocus.html">我的关注</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <!-- /.header-top-inner -->
            </div>
            <!-- /.container -->
        </div>
        <!-- /.header-top -->
        <!-- ============================================== TOP MENU : END ============================================== -->
        <div class="main-header">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-3 logo-holder">
                        <!-- ============================================================= LOGO ============================================================= -->
                        <div class="logo"><a href="index.html"> <img src="new/images/logo.png" alt="logo"> </a></div>
                        <!-- /.logo -->
                        <!-- ============================================================= LOGO : END ============================================================= -->
                    </div>
                    <!-- /.logo-holder -->

                    <div class="col-lg-7 col-md-6 col-sm-8 col-xs-12 top-search-holder">
                        <!-- /.contact-row -->
                        <!-- ============================================================= SEARCH AREA ============================================================= -->
                        <div class="search-area">
                            <form>
                                <div class="control-group">
                                    <ul class="categories-filter animate-dropdown">
                                        <a class="dropdown-toggle" data-toggle="dropdown"  href="#">搜索</a>
                                    </ul>
                                    <input class="search-field" v-model="searchValue"  placeholder="请输入要搜索的家政服务"/>
                                    <a class="search-button" href="#" @click="searchName"  ></a></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <h2 style="text-align:center">我的预约</h2>
    <div class="body-content outer-top-xs">
        <el-card style="margin: 10px">
            <el-table
                    border
                    header-align="center"
                    highlight-current-row
                    align="center"
                    tooltip-effect="dark"
                    :data="tableData"
                    size="small"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="serveInfo.title"
                        label="预约服务"
                        width="180" align="center">
                </el-table-column>
                <el-table-column
                        prop="serveInfo.newMoney"
                        label="预约价格"
                        width="180" align="center">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="预约时间" align="center">
                </el-table-column>
                <el-table-column
                        prop="status"
                        :formatter="statusFormatter"
                        label="预约状态" align="center">
                </el-table-column>
                <el-table-column
                        label="操作" width="230" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" v-if="scope.row.status == 2" size="mini" @click="buy(scope.row)">结算</el-button>
                        <el-button type="danger" size="mini" @click="deleteOrder(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="float:right;">
                <el-pagination
                        background
                        :current-page="page"
                        :page-size="size"
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="total">
                </el-pagination>
            </div>
        </el-card>

    </div>

    <footer id="footer" class="footer color-bg">
        <div class="copyright-bar">
            <div class="container">
                <div class="col-xs-12 col-sm-4 no-padding copyright">Copyright &copy; 2020.
                </div>
            </div>
        </div>
    </footer>
    <el-dialog title="付款" :visible.sync="dialogTableVisible">
        <img src="new/images/buy.png">
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="buyOk">支付成功</el-button>
        </div>
    </el-dialog>
</div>
<script src="js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/2.3/layer.js"></script>
<script src="js/common.js"></script>

<script src="new/js/bootstrap.min.js"></script>

<script src="new/js/bootstrap-hover-dropdown.min.js"></script>
<script src="new/js/owl.carousel.min.js"></script>

<script src="new/js/echo.min.js"></script>
<script src="new/js/jquery.easing-1.3.min.js"></script>
<script src="new/js/bootstrap-slider.min.js"></script>
<script src="new/js/jquery.rateit.min.js"></script>
<script src="new/js/lightbox.min.js"></script>
<script src="new/js/bootstrap-select.min.js"></script>
<script src="new/js/wow.min.js"></script>
<script src="new/js/scripts.js"></script>
<script>
    var vm = new Vue({
        el: "#CartContent",

        data: {
            isLogin : false,
            userId: '',
            nickName : '',
            tableData: [],
            multipleSelection: [],
            dialogTableVisible:false,
            orderId:'',
            searchValue: '',

            page: 1,
            size: 12,
            total: 0,
        },
        created: function () {
            var vms = this;
            vms.checkUser();
            vms.getInfoCart()
        }, //属性过滤器

        methods: {
            searchName(){
                window.localStorage.setItem("searchValue",this.searchValue);
                window.location.href="Category.html";
            },
            statusFormatter(row, column){
                var statusName;
                switch (row.status) {
                    case 1:
                        statusName = "未接单";
                        break;
                    case 2:
                        statusName = "已接单";
                        break;
                    case 3:
                        statusName = "已拒绝";
                        break;
                    case 4:
                        statusName = "支付完成";
                        break;
                }
                return statusName;
            },
            deleteOrder(infoId){
                layer.confirm('您确定要删除预约吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    HttpPost("/order/delete/" +infoId , null, function (res) {
                        if (res.result == true) {
                            layer.msg("删除预约成功", {icon: 1, time: 2000},function () {
                                window.location.reload();
                            });
                        } else {
                            layer.msg("删除预约失败!", {icon: 2, time: 2000});
                        }
                    })
                }, function(){});

            },
            buy(info){
                this.dialogTableVisible = true;
                this.orderId = info.id
            },
            buyAll(){
                const that = this;
                if (that.multipleSelection <= 0){
                    layer.msg("无勾选预约单",{icon:2,time:2000});
                    return false;
                }
                layer.confirm('您确定要结算吗吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    var arr = new Array()
                    for (var item of that.multipleSelection) {
                        arr.push(item.id);
                    }
                    HttpPost("/order/buyAll",arr,function(res){
                        if (res.result == true){
                            layer.msg("批量结算成功",{icon:1,time:2000},function () {
                                window.location.reload();
                            });
                        }
                    })
                }, function(){});


            },
            buyOk(){
                const that = this;
                that.dialogTableVisible = false;
                HttpPost("/order/"+this.orderId+"/"+4,null,function(res){
                    if (res.result == true){
                        layer.msg("结算成功",{icon:1,time:2000},function () {
                            that.getInfoCart();
                        });
                    }
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            checkUser : function(){
                var that = this;
                const isLogin = window.localStorage.getItem("isLogin");
                if (isLogin){
                    that.userId = window.localStorage.getItem("userId");
                    that.nickName = window.localStorage.getItem("nickName");
                    that.isLogin = true;
                }
            },
            logout : function(){
                window.localStorage.clear();
                window.location.href="index.html";
            },
            handleCurrentChange(val) {
                const that = this;
                console.log(val)
                const page = that.page;
                if (val === page){
                    return;
                }
                that.page = val;
                that.getInfoCart();
            },
            getInfoCart(){
                const that = this;
                var param = {
                    page : that.page,
                    size : that.size
                }
                HttpGet("/info/getInfoCart",param,function (res) {
                    if (res.result == true){
                        that.tableData = res.data.data;
                        that.total = res.data.total ;
                    }
                })
            },
        },


    });
</script>
</body>
</html>

